<template>
	<view>
		<view class="head">
			<view class="head-box">
				<view class="head-title">我的diy</view>
			</view>
			<image v-if="list.length" :src="list[0].url" class="head-img"></image>
		</view>
		<view class="head-bom">
			<view class="head-text">默认仅自己可见，点击切换状态</view>
			<view class="right-box" @click="setState">
				<view class="fl" v-if="!isOpen">
					<image src="../../static/images/icon/lock1.png" class="img"></image>
					<view class="">私密</view>
				</view>
				<view class="fl" v-else>
					<image src="../../static/images/icon/lock2.png" class="img"></image>
					<view class="">公开</view>
				</view>
			</view>
		</view>
		<view class="head-s">
			<view class="head-num">{{num}}/10</view>
			<view class="head-top">
				<view class="head-top-in" :style="{'width': 30*num +'rpx'}"></view>
			</view>
			<image src="../../static/images/icon/tips.png" class="icon" @click="showT"></image>
		</view>
		<view class="cont">
			<view class="item" v-for="(item,index) in list" :key="index" @click="view(item)">
				<image :src="item.url" class="img" show-menu-by-longpress></image>
				<view class="item-time">{{item.cTime | formatDate}}</view>
				<image src="../../static/images/icon/del1.png" class="icon" @click.stop="del(index)"></image>
			</view>
		</view>
		<image v-if="show" src="../../static/images/icon/shua.png" class="shua" @click="shua"></image>
		<view class="no-box" v-if="list.length==0">
			<image src="../../static/images/icon/icon-no.png" class="icon-no"></image>
			<view class="">暂无内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				num: 0,
				isOpen: false,
				show: true,
			}
		},
		computed: {},
		watch: {
			list: {
				handler(val) {
					this.num = val.length
					let list0 = []
					if (val.length > 10) {
						list0 = val.slice(0, 10)
						let listDel = val.slice(10)
						this.delList(listDel)
					} else {
						list0 = val
					}

					this.list = list0
				},
				deep: true,
			}
		},
		methods: {
			view(e) {
				console.log(e)
				wx.previewImage({
					urls: [e.url],
					showmenu: true,
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				let info = uni.getStorageSync('userInfo')
				const db = wx.cloud.database()
				db.collection('img_diy').where({
					openid: info.openid
				}).get().then(res => {
					console.log(res)
					if (res.data.length > 0) {
						let infoObj = res.data[0]
						this.list = infoObj.sgsList.reverse()

					}
					uni.hideLoading()
				})
			},
			setState() {
				this.isOpen = !this.isOpen
			},
			del(e) {
				console.log(e)
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除本条绘画',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');

							wx.cloud.callFunction({
								name: 'upImgDel',
								data: {
									index: e,
								}
							}).then(() => {
								that.getList()
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			delList(list) {
				let that = this
				list.forEach((e, i) => {
					console.log(e, i)
					wx.cloud.callFunction({
						name: 'upImgDel',
						data: {
							index: i + 10,
						}
					})
				})
			},
			shua() {
				this.getList()
				this.show = false
				setTimeout(() => {
					this.show = true
				}, 5000)
			},
			showT() {
				uni.showModal({
					title: '提示',
					content: '普通用户可以存储10张图，超出会删除最早一条',
					success: function(res) {}
				})
			},
		},
		onLoad(options) {
			this.getList()
			// let list = ['qqq','aaa','qwe','44','55']

			// console.log(list)
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		// onShareAppMessage() {},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #fff;
		padding-top: 50rpx;
		position: relative;
		overflow: hidden;

		.head-img {
			width: 750rpx;
			// height: 300rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			opacity: 0.6;
		}

		.head-box {
			height: 300rpx;
			position: relative;
			z-index: 20;

			.head-title {
				font-size: 40rpx;
				text-align: center;
				color: #000;
				font-weight: bolder;
			}
		}

	}

	.head-bom {
		position: relative;

		.head-text {
			background-color: #fff;
			// margin-top: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 20rpx;
			text-align: center;
			color: #515151;
		}

		.right-box {

			position: absolute;
			top: 0;
			right: 30rpx;

			// border: 1rpx solid red;
			.fl {
				height: 60rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.head-s {
		background-color: #fff;
		height: 80rpx;
		display: flex;
		align-items: center;

		.head-top {
			margin-left: 30rpx;
			width: 300rpx;
			height: 30rpx;
			background-color: #ccc;
			color: red;

			.head-top-in {
				height: 30rpx;
				background: linear-gradient(#00AEEC, #1296db);
			}

		}

		.head-num {
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
		}
	}

	.cont {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			// width: 320rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			text-align: center;
			padding: 10rpx;

			.img {
				width: 300rpx;
				height: 400rpx;
			}

			.item-time {
				font-size: 20rpx;
				margin-top: 10rpx;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				// position: absolute;
				right: 20rpx;
				top: 0rpx;
			}
		}
	}

	.shua {
		position: fixed;
		right: 60rpx;
		bottom: 160rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.no-box {
		width: 100%;
		text-align: center;
		margin-top: 200rpx;
		color: #8a8a8a;

		.icon-no {
			width: 300rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
